<template>
  <div class="zhuanti">
    <!-- <div  class="box">
      <img class="pic" src="@/assets/zhuanti01.jpg" />
      <div class="title">关爱他的成长每一步足迹</div>
      <div class="tip">专业运动品牌同厂，毛毛虫鞋买二送一</div>
      <div class="price">￥0.00元起</div>
    </div> -->
    <div  class="box" v-for="(item) in pageListData" :key="item.id">
      <img class="pic" :src="item.scene_pic_url" />
      <div class="title">{{item.title}}</div>
      <div class="tip">{{item.subtitle}}</div>
      <div class="price" v-if="item.price_info == 0">￥{{item.price_info}}.00起</div>
       <div class="price" v-if="item.price_info != 0">￥{{item.price_info}}起</div>
    </div>

    <!--   将 mode 设置为 simple 来切换到简单模式，此时分页器不会展示具体的页码按钮-->
   <!-- <van-pagination v-model="currentPage" :page-count="2" mode="simple" /> -->
 <van-pagination
      v-model="currentPage"
      :items-per-page="items_per_page"
      :page-count="pageCount"
      mode="simple"
    />

   <!-- 制顶 -->
    <BackTop/>
  </div>
</template>
 
<script>
import BackTop from '@/components/BackTop.vue'
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      currentPage: 1,//当前页
      totalPages:10,//10条数据
      items_per_page: 3,//每一页的记录数
      pageCount:4, //分为几页
    }
  },
  components: {
    BackTop
  },
  mounted() { 
    // 请求action
    this.$store.dispatch("getHomeDB")
  },
  computed:{
    ...mapGetters(['topicIndexList']),
     pageListData() {
       return this.topicIndexList.slice((this.currentPage-1)*this.items_per_page,this.currentPage*this.items_per_page);
    }
  },
  methods: { 
  }, 
};
</script>
 
<style lang="less" scoped>
.van-pagination__item {
  color: darkred;
}
.van-pagination__item--disabled {
  color: #333;
}
.van-pagination__page-desc {
  display: none;
}
.zhuanti {
  padding-bottom: 100px;
  .box {
    background-color: #fff;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 20px;
    .pic {
      width: 100%;
    }
    .title {
      font-size: 18px;
      margin: 10px 0;
    }
    .tip {
      font-size: 16px;
      margin: 20px 0;
      color: rgb(31, 31, 31);
      overflow: hidden;
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 限制在一个块元素显示的文本的行数 */
      -webkit-line-clamp: 1;
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;
    }
    .price {
      color: rgb(155, 0, 0);
      margin-bottom: 10px;
    }
  }
}
// /deep/.van-pagination__page-desc {
//   // 隐藏中间页数
//   display: none;
// }
/deep/.van-pagination__item  {
  // 设置按钮文字颜色
  color: darkred;
}
</style>